
<style  lang="less">
           #login{
                width: 100%;
                height: 100%;
                background-color:'#f1f1f1';
                position: relative;
                display:flex;/*Flex布局*/
                display: -webkit-flex; /* Safari */
                align-items:center;/*指定垂直居中*/
                #loginForm{
                  width:400px;
                  padding:50px;
                  background-color:white;
                  box-shadow: 0 0 8px rgba(0,0,0,.1);
                  margin:auto auto;
                  div.ivu-form-item-error-tip{left:30px;}
                }
           }

</style>

<template>
    <div id='login'>
        <Form ref="formInline" :model="formInline" :rules="ruleInline"  id='loginForm'>
            <FormItem prop="user">
                <Input type="text" v-model="formInline.user" placeholder="用户名" size='large'>
                    <Icon type="ios-person-outline" slot="prepend"  size=20></Icon>
                </Input>
            </FormItem>
            <FormItem prop="password">
                <Input type="password" v-model="formInline.password" placeholder="密码" size='large'>
                    <Icon type="ios-locked-outline" slot="prepend" size=20 ></Icon>
                </Input>
            </FormItem>
            <FormItem>
                <Button type="primary"  size='large'  long  :loading="loading"  @click="handleSubmit('formInline')">
                    <span v-if="!loading">登录</span>
                    <span v-else>登录中...</span>
                </Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
 export default {
        data () {
            return {
                loading: false,
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: '请填写用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码最少6位', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit(name) {

              // this.loading = true;
               /*  this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                }) */
            }
        }
    }
</script>
